<template>
  <div>
    增加:
    <button v-on:click="add">{{count}}</button>
    <button v-on:click="addN(3)">{{count}}</button>
    <button v-on:click="addAync">{{count}}</button>
    <button v-on:click="addNAync(5)">{{count}}</button>
    <button>{{show}}</button>
  </div>
</template>

<script>
// 方式二： mapState 辅助函数获取（推荐）
// mapGetters 辅助函数获取（推荐）
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  name: 'My-addition',
  computed: {
    ...mapState(['count']),
    ...mapGetters(['show'])
  },
  methods: {
    // 使用常量替代 Mutation 事件类型
    // 将这里的 sub 映射为 this.$store.commit('sub')
    // 将这里的 subN 映射为 this.$store.commit('subN')
    ...mapMutations(['add', 'addN']),
    ...mapActions(['addAync', 'addNAync'])
  }
}
</script>

<style scoped>

</style>
